<template>
  <el-descriptions :column="3" border>
    <el-descriptions-item
      v-for="(item, index) in descriptionsList"
      :key="index"
      :label="item"
      label-class-name="my-label"
      content-class-name="my-content"
      :label-style="{ background: '#F5FAFF', color: '#6D6D6D', textAlign: 'center', width: '10%' }"
      :content-style="{ width: '23.3%'}"
    >
      {{ info[index] }}
    </el-descriptions-item>
  </el-descriptions>
</template>

<script>
export default {
  name: 'Index',
  props: {
    info: { type: Object, default: () => {} },
    descriptionsList: { type: Object, default: () => {} }
  },
  watch: {
    info: function(newVal) {
      // console.log('description info', newVal)
    },
    descriptionsList: function(newVal) {
      // console.log('description list', newVal)
    }
  }
}
</script>

<style scoped>

</style>
